<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-menu"></i> 日志管理</el-breadcrumb-item>
        <el-breadcrumb-item>操作日志</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form :inline="true" :model="formData" ref="formData" class="demo-form-inline">
      <el-form-item label="操作ip" prop="requestIp">
        <el-input v-model="formData.requestIp" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="操作人" prop="operatorName">
        <el-input v-model="formData.operatorName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="操作时间" prop="createTimeFromStr">
        <el-date-picker v-model="formData.createTimeFromStr" type="datetime" format="yyyy-MM-dd HH:mm:ss" ></el-date-picker>
      </el-form-item>
      <el-form-item label="-" prop="createTimeToStr">
        <el-date-picker v-model="formData.createTimeToStr" type="datetime" format="yyyy-MM-dd HH:mm:ss" ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="resetForm('formData')">重置条件</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border height="500" style="width: 100%" ref="multipleTable">
      <el-table-column type="index" width="55"></el-table-column>
      <el-table-column prop="requestIp" label="操作ip" min-width ="100" center="true"></el-table-column>
      <el-table-column prop="operatedMenu" label="操作菜单" min-width ="100" center="true"></el-table-column>
      <el-table-column prop="operatedButton" label="操作按钮" min-width ="100" center="true"></el-table-column>
      <el-table-column prop="operatorName" label="操作人" min-width ="100" center="true"></el-table-column>
      <el-table-column prop="createTime" label="操作时间" min-width ="100" center="true"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { queryOperateLogs } from '@/services/getData'
export default {
  data() {
    return {
      tableData: [], // 表格数据
      currentPage: 1,
      totalCount: null,
      pagesize: 10,
      is_search: false,
      formData: {}
    }
  },

  created() {
    this.initData()
  },

  methods: {
    search() {
      this.is_search = true
      let formDataStr = this.GLOBAL.ObjectCopy(this.formData)
      formDataStr["createTimeFrom"] = this.formData["createTimeFromStr"] ? this.$moment(this.formData["createTimeFromStr"]).format('YYYYMMDD HH:mm:ss') : ''
      formDataStr["createTimeTo"] = this.formData["createTimeToStr"] ? this.$moment(this.formData["createTimeToStr"]).format('YYYYMMDD HH:mm:ss') : ''
      delete formDataStr["createTimeFromStr"]
      delete formDataStr["createTimeToStr"]
      this.loadData(formDataStr)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.search()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.search()
    },

    async initData() {
      try {
        this.loadData()
      } catch (err) {
        console.log('获取数据失败', err)
      }
    },
    async loadData(v) {
      try {
        let params = {
          page: this.currentPage,
          rows: this.pagesize,
        }
        let obj = Object.assign(params, v)
        const res = await queryOperateLogs(obj)
        if (res.resultCode == 1) {
          this.tableData = res.rows
          this.totalCount = res.total
        } else {
          throw new Error(res.message)
        }
      } catch (err) {
        console.log('获取数据失败', err)
      }
    }
  }
}
</script>
